<template>
    <!--景区首页展示 gpd 2022-07-04 19：51：00-->
    <div class="scenic">
		<div>
			<el-row>
				<el-col :span="16" style="margin-left:100px;height:140px">
            <el-select v-model="scenicName" :filterable="true" placeholder="请输入景区名称" style="width:95%" @blur="getScenicNameByScenicName()" >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.scenicName"
                :value="item.id"
                 @click.native="assignment(item.id)"
              >
              </el-option>
            </el-select>
				</el-col>
				<el-col :span="2" :pull="1">
					<el-button style="width:132px;height:56px;" type="primary" @click="scenicDetails()">搜索</el-button>
				</el-col>
				<el-col :span="2" :pull="1">
					<el-button @click="goMyHomePage" style="width:124px;height:56px;">我的主页</el-button>
				</el-col>
			</el-row>
			<el-row> 
				<el-col :span="10">
					<div class="areaShowDiv" @mouseleave="cityRemove" >
					<!-- 省份展示 -->
					<el-card class="scenic_box-card" :style="{'max-height': this.timeLineHeight + 'px' }"
					style="overflow-y:scroll;float:left;position: relative;width:380px;height:120px;">
					<!-- <div v-for="o in province" :key="o.id" class="div1"  @mouseover="leave(o.id)">
						<span> {{ o.name }}</span><br>
					</div> -->
					<div class="scenicExhibition_div1" @mouseover="leave()">
						<span>中国</span><br>
						<span v-for="item in province.slice(0,4)" :key="item.id" style="font-size:14px;margin-left:7px;color:">{{item.name}}</span>
					</div>
					</el-card>
					<!-- 鼠标移入省份时显示市名 -->
					<div class="city" v-show="dialogCity">
					<div v-for="o in province" :key="o.id" class="provinceAll" >
						<p class="SEB_span1"> {{ o.name }}</p>
						<div style="width:600px;height:50px;margin-left:80px;">
						<div v-for="item in o.childs" :key="item.id" class="shiAll">
							<span @click="citySkip(item.id, item.name, item.pinyin)"> {{ item.name }}</span>
						</div>
						</div>
					</div>
					</div>
					<el-card class="mapCard">
					<span>探索世界</span>
          <!-- <div class="scenicExhibition_inputDiv"> -->
          <el-popover
          placement="right"
          trigger="click"
          v-model="mapCardVisible">
          <div class="mapDiv">
            <el-tabs v-model="first" @tab-click="handleClick">
              <el-tab-pane label="ABCDEF" name="A,B,C,D,E,F"></el-tab-pane>
              <el-tab-pane label="GHIJ" name="G,H,I,J"></el-tab-pane>
              <el-tab-pane label="KLMN" name="K,L,M,N"></el-tab-pane>
              <el-tab-pane label="PQRSTUVW" name="P,Q,R,S,T,U,V,W"></el-tab-pane>
              <el-tab-pane label="XYZ" name="X,Y,Z"></el-tab-pane>
            </el-tabs>
            <div v-loading="loading" class="byFirstCity" v-for="item in citys" :key="item.id">
              <span style="float:left;" v-for="first in item.slice(0,1)" :key="first.first">{{first.first}}</span>
              <div style="width:550px;margin-left:50px;">
                <el-link @click="getScenicByCityId(itemC.id, itemC.name)" target="_blank" style="margin-left:15px" v-for="itemC in item" :key="itemC.id">
                  {{itemC.name}}
                </el-link>
              </div>
            </div>
          </div>
          <el-input slot="reference" style="width:80px" :value="cityName"></el-input>
          </el-popover>
          <!-- </div> -->
					<!-- 地图容器 -->
					<div id='map'></div>
					</el-card>
					</div>
				</el-col>
				<el-col :span="14" :push="8">
					<!-- 图片展示《宝藏村落》 -->
					<div class="scenicExhibition_div2">
					<img src="../../img/0zg011200084963208EE1.jpg" class="img1">
					</div>
					<!-- 走马灯展示 -->
					<div class="zmdDiv">
					<i class="el-icon-caret-left" style="font-size:30px ;position: absolute;top:80px;left:0px;z-index:1;color:black;"  @click="zmdLeft"></i>
					<div ref="pcTipLeft" class="zmdSon" >
						<div class="zmdSonDiv"  v-for="(o,index) in rotationChartList" :key="'info-'+index" > 
              <p class="zmdFont">{{o.title}}</p>
							<img :src='`http://127.0.0.1:8082/getImageById?id=${o.coverId}`'  @click="travelDitails(o.id)">
						</div>
					</div>
					<i class="el-icon-caret-right" style="font-size:30px ;position: absolute;top:80px;right:0px;z-index:1;color:black;" @click="zmdRight"></i>
					</div>
				</el-col>
			</el-row>
		</div>
        <div>
            <el-row>
                <p style="font-size:20px;margin-top:60px;margin-left:100px;">热门景区排行</p>
                <!-- 景区收藏排行 -->
                <div  style="margin-left:100px;margin-top:50px;height:596px;float:left;">
                    <el-card
                    :body-style="{padding: '0px'}"
                    style="background:linear-gradient(-153.43deg, #f4fafd 0%, #e2f2fb 100%);width:300px;height:570px;margin-top:20px;">
                        <img src="../../image/group.png" class="scenicExhibition_img1">
                        <p style="font-size:20px;font-weight:bold;width:200px;float:left;margin-top:30px;margin-left:10px;">总收藏.景区</p>
                        <div style="height:484px;background:white;margin-top:10px;float:left;border-radius: 8px;width:290px;margin-left:5px;">
                            <div v-for="(item,index) in scenicRankCollection" :key="item.id" class="scenicExhibition_rank_div1" @click="scenicJump(item.scenicId)">
                                <img :src='`http://127.0.0.1:8082/getImageById?id=${item.scenicAvatarId}`' class="scenicExhibition_img2">
                                <div class="scenicExhibition_rank_div2" :ref="`aa${index}`">{{index+1}}</div>
                                <div style="width:198px;height:80px;float:left;">
                                    <p style="margin-left:20px;width:120px;float:left;font-weight:bold;margin-top:6px;">{{item.scenicName}}</p>
                                    <span style="margin-left:10px;width:40px;color:#0086f6;font-size:16px;font-weight:bold;margin-top:6px;">￥{{item.scenicPrice}}</span>
                                    <p style="font-size:12px;font-weight:bold;margin-top:30px;margin-left:20px;">已有{{item.collection}}人收藏</p>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
                <!-- 景区出行排行 -->
                <div  style="margin-left:100px;margin-top:50px;height:596px;float:left;">
                    <el-card
                    :body-style="{padding: '0px'}"
                    style=" background:linear-gradient(26.57deg, #e6ecfc 0%, #f4f6fd 100%);width:300px;height:570px;margin-top:20px;">
                        <img src="../../image/flight.png" class="scenicExhibition_img1">
                        <p style="font-size:20px;font-weight:bold;width:200px;float:left;margin-top:30px;margin-left:10px;">当季出行.景区</p>
                        <div style="height:484px;background:white;margin-top:10px;float:left;border-radius: 8px;width:290px;margin-left:5px;">
                            <div v-for="(item,index) in scenicRankTravelVolume" :key="item.id" class="scenicExhibition_rank_div1" @click="scenicJump(item.scenicId)">
                                <img :src='`http://127.0.0.1:8082/getImageById?id=${item.scenicAvatarId}`' class="scenicExhibition_img2">
                                <div class="scenicExhibition_rank_div2" :ref="`bb${index}`">{{index+1}}</div>
                                <div style="width:198px;height:80px;float:left;">
                                    <p style="margin-left:20px;width:120px;float:left;font-weight:bold;margin-top:6px;">{{item.scenicName}}</p>
                                    <span style="margin-left:10px;width:40px;color:#0086f6;font-size:16px;font-weight:bold;margin-top:6px;">￥{{item.scenicPrice}}</span>
                                    <p style="font-size:12px;font-weight:bold;margin-top:30px;margin-left:20px;">已有{{item.travelVolume}}人出行过景区</p>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-row>
        </div>
      <div>
        <el-row>
            <div style="margin-left:100px;margin-top:50px;">
                <span style="font-size:20px">推荐游记</span>
            </div>
            <el-col :span="8" v-for="(o, index) in travelNotesList" :key="index" class="ScenicExHiBitionCol">
                <el-card :body-style="{ padding: '0px' }"> 
                    <img :src='`http://127.0.0.1:8082/getImageById?id=${o.coverId}`' class="ScenicExHiBitionImage">
                        <div style="padding: 14px;"  @click="travelDitails(o.id)">
                            <div class="bottom clearfix" >
                                <span style="float:left;width:50%;margin-left:20px">
                                    <el-link :underline="false" style="font-size:20px">{{o.title}}</el-link>
                                </span>
                                <span class="ScenicRxhibition_authorSpan">
                                <el-avatar :src='`http://127.0.0.1:8082/getImageById?id=${o.avatarId}`' style="margin-top:10px"></el-avatar>
                                    <font size="3 px" class="ScenicRxhibition_authorFont">{{o.author}}</font>
                                </span>
                                <span style="float:left;width:60%;margin-top:70px;margin-left:20px">
                                    <font size="2px">发布时间：{{o.createTime}}</font>
                                    <font size="2px" class="el-icon-view" style="margin-left:40px">浏览量：{{o.views}}</font>
                                </span>
                            </div>
                        </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                layout="prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
        </div>
      </div>
  </div>
</template>
<script>
import icon from '@/assets/marker-icon.png'
const axios = require('axios')
export default {
    name: 'ScenicExhibition',
    data() {
        return {
            // 景区id
            scenicId:'',
            //存放搜索景区名称
            scenicName:'',
            // 存放查询到的景区名称集合
            options: [],
            //用户信息集合
            userAllList:[],
            // 根据首字母分类弹出框状态
            mapCardVisible: false,
            id:'',
            isCollapse: true,
            province:[],
            city:[],
            dialogCity:false,
            timeLineHeight: '',
            imageData:[],
            dialogLeftHotel:false,
            arr:[1,2,3,4,5],
            input:'',
            first: 'A,B,C,D,E,F',
            // 市集合
            citys: [],
            // loading加载状态
            loading: false,
            // 存放地图筛选城市名称
            cityName: '',
            // 存放地图筛选城市名称
            cityId: '',
            // 存放景区信息列表 用于在地图上展示景区信息
            scenicList: [],
            // 存放地图标识对象
            greenIcon: null,
            map: null,
            // 存放地图标识marker
            marker: null,
            // marker组
            layerGroup: null,
            //默认页数
            currentPage3: 1,
            // 走马灯展示集合
            rotationChartList: [],
            //游记信息集合
            travelNotesList: [],
            // 分页对象
            page: {
                pageSize: 10,
                pageNum: 1,
                total: 0
            },
            //收藏排行数据
            scenicRankCollection:[],
            //出行量排行数据
            scenicRankTravelVolume:[],
            // 颜色存放集合
            background: [
                '#f63b2e','#FF8B26','#FF8B26','#99AECA','#99AECA'
            ],
        };
    },
    mounted () {
        // 全查游记信息
        this.getTourNoteAll()
        // 根据首字母获取市
        this.getCitysByFirst()
        // 渲染地图
        this.MapShow()
        //查询所有省份前端展示
        this.getProvinceAll()
        //获取景区排行信息
        this.getRanking()
        //滚动条样式
        this.timeLineHeight = document.documentElement.clientHeight - 210;
        window.onresize = () => {
            this.timeLineHeight = document.documentElement.clientHeight - 210;
        };
    },
    //监听scenicRankList（查询景区排行方法执行完成）值发生变化是进入方法
    //当scenicRankList渲染页面完成后执行this.rankColor方法
    watch: {
        scenicRankCollection: function() {
            this.$nextTick(() => { 
                //景区收藏排名ref绑定变色
                this.rankColor()
            });
        }
    },
    methods: {
          // 点击某个景区跳转到景区详情页面
        scenicDetails(){
          this.$router.push({name:'ScenicspotDetailsView', query:{id:this.scenicId}})
        },
        // 点击景区名称时将景区id赋值给全局变量
        assignment (id) {
          this.scenicId = id
          console.log(this.scenicId)
        },  
        // 根据景区名称模糊查景区名称
        getScenicNameByScenicName(){
          axios
          .get('http://127.0.0.1:8082/scenic/getScenicNameByScenicName', {
            params: {
              scenicName: this.scenicName
            }
          })
          .then((res) => {
            this.options = res.data.obj
          })
        },
        //景区收藏排名ref绑定变色
        rankColor(){
            var i = 0
            this.background.forEach(element => {
                this.$refs["aa"+i][0].style.background = element
                this.$refs["bb"+i][0].style.background = element
                i++
            });
        },
        //景区跳转
        scenicJump(scenicId){
            this.$router.push('/ScenicspotDetailsView?id=' + scenicId)
        },
        //获取景区排行信息
        getRanking(){
            axios.get('http://127.0.0.1:8082/scenicRank/getRanking').then(res=>{
                this.scenicRankCollection = res.data.obj.scenicRankCollection
                this.scenicRankTravelVolume = res.data.obj.travelVolume
            }).catch(error => {
                this.$message.error('查询景区排行失败！');
            })
        },
        // 点击我的页面
        goMyHomePage () {
            var token = window.sessionStorage.getItem('token')
            this.$router.push({path: '/MyHomePage'})
        },
        // 全查游记信息
        getTourNoteAll () {
            axios
            .get('http://127.0.0.1:8082/tourNote/getTourNoteAll', {
                params: {
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                }
            })
            .then((res) => {
                this.travelNotesList = res.data.obj.content
                this.page.total = res.data.obj.total
                this.travelNotesList.forEach((item) => {
                    if(this.rotationChartList.length<6){
                        this.rotationChartList.push(item)
                        return
                    }
                })
            })
        },
        // 地图筛选城市显示景区方法 (lzy 2022-7-15 15点20分) 
        getScenicByCityId (cityId, cityName) {
            this.mapCardVisible = false
            this.cityName = cityName
            this.cityId = cityId
            var router = this.$router
            this.$axios.get('http://127.0.0.1:8082/scenic/getScenicByCityId?cityId=' + cityId).then(res => {
                this.scenicList = res.data.obj
                var i = 0
                if(this.layerGroup !== null){
                    this.layerGroup.clearLayers()
                }
                const layers = []
                if (this.scenicList !== null) {
                    this.scenicList.forEach(item => {
                        var text = '<div id="btn' + i + '"><img style="width:100px;" src="http://127.0.0.1:8082/getImageById?id=' + item.imageId + '"/><div style="width:100px;font-size:16px;">' + item.briefIntroduction + '</div></div>'
                        this.marker = this.$L.marker([item.lat, item.lng], {icon: this.greenIcon}).addTo(this.map).bindPopup(text, { autoClose: false }).openPopup()
                        layers.push(this.marker)
                        document.getElementById('btn' + i).style = "cursor:pointer"
                        // 给弹框内容绑定事件
                        document.getElementById('btn' + i).onclick = function (e) {
                        router.push({name: 'ScenicspotDetailsView', query:{id: item.id}})
                        }
                        i++
                    })
                    this.map.setView([this.scenicList[0].lat, this.scenicList[0].lng], 8) // 地图中心位置，缩放等级
                    this.layerGroup = this.$L.layerGroup(layers)
                    this.map.addLayer(this.layerGroup);
                }
            })
        },
        // 根据首字母获取市 (lzy)
        getCitysByFirst () {
            this.$axios.get('http://127.0.0.1:8082/area/getCitysByFirst?first=' + this.first).then(res => {
                this.citys = res.data.obj
            }).catch(error => {
                this.$message.error('服务器崩溃了，请稍后再尝试使用！');
            })
        },
        // 标签页点击方法 (lzy)
        handleClick(tab, event) {
        // 根据首字母获取市
            this.getCitysByFirst()
        },
        // 地图渲染 (lzy)
        MapShow () {
            let that = this
            if (document.getElementById('map')) {
                const that = this
                const map = this.$L.map('map', {
                    center: [34.161818, 108.767477], // 中心位置
                    zoom: 6, // 缩放等级
                    attributionControl: true, // 版权控件
                    zoomControl: true // 缩放控件
                })
                
                this.map = map

                var LeafIcon = this.$L.Icon.extend({
                options: {
                    iconSize: [25, 41], // 图标宽高
                    iconAnchor: [13, 38], // 图标锚点
                    shadowAnchor: [4, 62], // 阴影锚点
                    popupAnchor: [0, -40] // 弹出框弹出位置，相对于图标锚点
                }
                })

                // 创建多个icon
                var greenIcon = new LeafIcon({
                    iconUrl: icon
                })

                this.greenIcon = greenIcon

                this.map = map // data上需要挂载
                this.$L.tileLayer(
                'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
                , { minZoom: 4 }).addTo(map) // 加载底图
                // 给地图绑定事件
                this.map.on('click', function () {
                    that.$router.push({name: 'Leaflet'})
                })
            } else {
                // alert(1)
            }
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        //移入导航栏显示
        LeftHotelMouseOver(){
            this.dialogLeftHotel=true
        },
        LeftHotelMouseleave(){
            this.dialogLeftHotel=false
        },
        //查询所有省份
        getProvinceAll(){
            axios.get('http://127.0.0.1:8082/area/getProvinceAll').then(res=>{
                this.province=res.data.obj.diySlide
            }).catch(error => {
                this.$message.error('服务器崩溃了，请稍后再尝试使用！');
            })
        },
        //鼠标移入时查询该省份的市级
        leave(){
            // var pid = districtId
            this.dialogCity=true
            // axios.get('http://127.0.0.1:8082/area/getCityAllByPid?pid='+pid).then(res=>{
            //   this.city=res.data.obj
            // }).catch(error => {
            //   this.$message.error('服务器崩溃了，请稍后再尝试使用！');
            // })

        },
        //移出市级模块
        cityRemove(){
            this.dialogCity=false
        },
        //点击某个市跳转
        citySkip(districtId, cityName, pinyin){
            this.$router.push({name:'ScenicRegionView', query:{id: districtId, cityName: cityName, pinyin: pinyin}})
        },
        // 点击某个游记跳转到游记详情界面
        travelDitails(id){
            this.$router.push({name:'TravelDitails', query:{id: id}})
        },
        //走马灯点击右图标移动
        zmdRight(){
            this.$refs.pcTipLeft.style.position='absolute'
            // this.$refs.pcTipLeft.style.left=0+"px"
            this.$refs.pcTipLeft.style.left=-900+'px'
        },
        //走马灯点击左图标移动
        zmdLeft(){
            this.$refs.pcTipLeft.style.position='absolute'
            this.$refs.pcTipLeft.style.left=0+"px"
            // this.$refs.pcTipLeft.style.left=0+'px'
        },
        //查询轮播图id
        selectAvatarId(){
            axios.get('http://127.0.0.1:8080/area/sortNumList')
            .then(res=>{
                this.imageData=res.data
            }).catch(error => {
                this.$message.error('服务器崩溃了，请稍后再尝试使用！');
            })
        },
        // 用于分页
        handleSizeChange (ps) {
            this.page.pageSize = ps
            this.getTourNoteAll()
        },
        // 用于分页
        handleCurrentChange (pn) {
            this.page.pageNum = pn
            this.getTourNoteAll()
        },
    }
};
</script>
<style lang="less" scoped>
.byFirstCity{
  margin-bottom: 10px;
}
.mapUl{
  height: 30px;
  border-bottom: 1px solid #e6e6e6;
  margin-left: 0;
  padding-left: 0;
}
.mapUl .li{
  float:left;
  margin-left: 30px;
}
// 地图容器
#map{
  width:340px;
  height: 580px;
}
.mapCard {
  position:absolute;
  top:140px;
  width:380px;
  height: 660px;
}
body > .el-container {
  margin-bottom: 40px;
}
.scenicExhibition_inputDiv{
  width: 40px;
  height: 40px;
  margin-top: -30px;
  margin-left: 90px;
  line-height: 40px;
}
::v-deep .el-input__inner{
  height: 56px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
.scenic_box-card {
  width: 480px;
}
.scenic_box-card::-webkit-scrollbar {display:none}
.headImg{
  position:relative;
  top:4px;
  left:-10px;
  width:24px;
  height:24px;
  border-radius:50%;
}
.headUser{
    width:116px;
    height:32px;
    border-radius:90px;
    background-color:rgb(192, 237, 248);
    margin-top:8px;
}
.headOrder{
  line-height:30px;
  width:100px;
}
.headFont{
  font-size:12px;
  position: relative;
  top:-12px;
  width:25px;
  height:20px;
  left:-6px;
  color:rgb(51, 169, 238);
  font-weight: bold;
}
.headFont:hover{
    cursor: pointer;
}
.el-col-24{
  width:100px;
}
//省份、市模块管理总的div样式
.areaShowDiv{
  position: absolute;
  width:80%;
  height:120px;
  left:100px;
}
/* 鼠标移入省时显示市模块样式*/
.city{
    width:800px;
    height:800px;
    background-color: white;
    position:relative;
    left:40px;
    border-radius:2.7%;
    box-shadow: 3px 5px 5px #bdbec0;
    float: left;
    z-index: 1000;
    overflow-y:scroll;
}
.city::-webkit-scrollbar {display:none}
.provinceAll{
  float: left;
  width:800px;
  margin-bottom: 20px;
  margin-left:20px;
}
.shiAll{
  float: left;
  margin-left:20px;
  margin-top:20px;
}
a{
  text-decoration: none;
  color: rgb(128, 81, 81);
	}
.SEB_span1{
  font-size:16px;
  width:60px;
  font-weight: bold;
  float: left;
  margin-top:20px;
}
.shiAll:hover{
  cursor: pointer;
  color: rgb(56, 129, 238);
}
// 每个省份样式
.scenicExhibition_div1{
  width:320px;
  height:80px;
  font-size:18px;
  line-height: 40px;
  margin-top:10px;
  border-bottom:1px solid #cfcfcf;
}
//鼠标移入省份时展示样式
.scenicExhibition_div1:hover{
  background-color: rgb(227, 233, 235);
}
//展示图片《宝藏村落》样式
.scenicExhibition_div2{
  width:900px;
  height:540px;
}
//展示图片《宝藏村落》样式
.img1{
  border-radius: 3%;
  width:900px;
  height:540px;
}
/* 走马灯样式 */
.zmdDiv{
  width:900px;
  height:220px;
  position: relative;
  overflow: hidden;
  margin-top:50px;
}
/* 走马灯子级div */
.zmdSon{
  position: absolute;
  left: 0;
  width:1800px;
  height:220px;
  transition: all .3s linear 0s;
  margin-top: -30px;
}
/* 走马灯子级2div */
.zmdSon1{
  width:900px;
  height:220px;
  transition: all .3s linear 0s;
}
// 走马灯子级字体展示div样式
.zmdFont{
  width: 250px;
  z-index: 2;
  position: relative;
  color: white;
  left: 0;
  top: 160px;
  overflow:hidden;
  white-space:nowrap;	//单行显示
  text-overflow:ellipsis;	//超出部分省略号显示
}
.zmdSonDiv{
  width:290px;
  height:198px;
  margin-left:9px;
  float:left;
  margin-top:10px;
}
// 走马灯子级展示移入放大
.zmdSon div:hover{
  transform: scale(1.05);
  overflow: hidden;
  cursor: pointer;
}
// 走马灯子级2展示移入放大
.zmdSon1 div:hover{
  transform: scale(1.1);
  overflow: hidden;
  cursor: pointer;
}
.scenic{
  width:1600px;
  margin: 0 auto;
}
.ScenicExHiBitionCol{
	width:84%;
	margin-left:6%;
	margin-top:40px	
}
.ScenicExHiBitionImage{
	float:left;
	width:400px;
	height:250px;
	border-radius: 6%;
}
.block{
	text-align: center;
}
.ScenicRxhibition_authorFont{
  position: relative;
  top:-15px;
  left: 10px
}
.ScenicRxhibition_authorSpan{
  float:left;
  width:60%;
  margin-top:60px;
  margin-left:20px;
}
.el-icon-caret-right{
  width: 30px;
  height: 30px;
  background-color: white;
  Border-radius: 30%;
  margin-right: 10px;
}
.el-icon-caret-left{
  width: 30px;
  height: 30px;
  background-color: white;
  Border-radius: 30%;
  margin-left: 10px;
}
.scenicExhibition_img1{
    width:76px;
    height:70px;
    float:left;
}
.scenicExhibition_img2{
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
    float:left;
}
.scenicExhibition_rank_div1{
    width:290px;
    height:90px;
    margin-bottom:8px;
    border-radius: 8px;
}
.scenicExhibition_rank_div1:hover{
    cursor: pointer;
    box-shadow: 0px 5px 5px 0px #d8d3d3;
}
.scenicExhibition_rank_div2{
    position: absolute;
    border-radius: 0px 100px 100px 0px;
    height: 18px;
    width: 14.34px;
    color: #ffffff;
    font-size: 12px;
    padding-left: 4px;
    line-height: 18px;
    background:red;
}
</style>
